<template>
  <div class="">
    <!-- <h1>全部组件</h1> -->

    <van-row>
      <van-col span="4">
        全选：<input type="checkbox" v-model="checked" @change="checkall" />
      </van-col>
      <van-col span="4" offset="16">
        <span @click="removeall">选中删除</span>
      </van-col>
    </van-row>

    <van-card
      v-for="item in $store.state.list"
      v-show="item.state == 0"
      :key="item.id"
      :price="item.price"
      :desc="item.subscribe"
      :title="item.name"
    >
      <template #footer>
        <input type="checkbox" v-model="result" :value="item" @change="check" />
      </template>
    </van-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      result: [],
      // listall: [],
    };
  },
  mounted() {
    // this.listall = this.$store.state.list.filter((item) => {
    //   return item.state == 0;
    // });
  },
  computed: {
    listall() {
      return this.$store.state.list.filter((item) => {
        return item.state == 0;
      });
    },
  },
  methods: {
    checkall() {
      if (this.checked == true) {
        this.result = this.listall;
      } else {
        this.result = [];
      }
    },
    check() {
      if (this.result.length == this.listall.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    removeall() {
      this.$store.commit("removeall", this.result);
    },
  },
  components: {},
};
</script>

<style lang="scss"></style>
